<template>
  <span
    :key="id"
    style="margin: 2px;"
    @mouseenter="onClosable($event, true)"
    @mouseleave="onClosable($event, false)">
      <el-tag size="small"
        :color="color.backgroundColor"
        :style="{color: color.color, border: '1px solid transparent', lineHeight: '20px', ...styleObject}">
          {{text}}
          <el-icon v-if="canClose && bIsClosable" class="tag-delate" @click="onClose"><close /></el-icon>
      </el-tag>
  </span>
</template>

<script>
  export default {
    name: 'tag',
    data () {
      return {
        bIsClosable: false,
      }
    },
    props: {
      text: [String, Number],
      id: [String, Number],
      canClose: Boolean,
      color: {
        type: Object,
        default: () => {
          return {
            backgroundColor: '#ecf5ff',
            color: '#409eff',
          };
        }
      },
    },
    computed: {
      styleObject() {
        return {
          '--color': this.color.color,
          '--background-color': this.color.backgroundColor,
        };
      },
    },
    methods: {
      onClosable(e, bool) {
        this.bIsClosable = bool;
      },
      onClose() {
        this.$emit('close');
      },
    },
  }
</script>

<style lang="scss">
  .tag-delate {
    width: 12px;
    height: 12px;
    line-height: 12px;
    text-align: center;
    font-weight: 600;

    &:hover {
      color: var(--background-color);
      background: var(--color);
    }
    &::before {
      cursor: pointer;
    }
  }
</style>
